<!--
 * @Date: 2019-11-11 10:48:37
 * @LastEditors  : Vi卡农
 * @LastEditTime : 2020-01-15 17:54:03
 * @describe: -新盘列表维护-
 -->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-dictionary__dictinfo}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-row>
          <el-col :span="18">
            <el-form-item>
              物业类型：
              <ren-select v-model="dataForm.type" dict-type="dictType" placeholder="物业类型"></ren-select>
            </el-form-item>

            <el-form-item>
              区域：
              <el-select
                v-model="dataForm.districtCode"
                placeholder="请选择"
                @change="CityRegionChange"
              >
                <el-option
                  v-for="item in this.$store.state.CityRegion"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              商圈：
              <el-select
                v-model="dataForm.business"
                placeholder="请选择"
                :disabled="dataForm.districtCode==''"
              >
                <el-option
                  v-for="item in businessList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              地铁线路：
              <el-select v-model="dataForm.metroId" placeholder="请选择" clearable>
                <el-option
                  v-for="item in this.$store.state.MetroPage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click.native="MetroPageChange(item)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              站点：
              <el-select
                v-model="dataForm.stationId"
                placeholder="请选择"
                :disabled="dataForm.metroId==''"
              >
                <el-option
                  v-for="item in metrostationList"
                  :key="item.stationId"
                  :label="item.stationName"
                  :value="item.stationId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left:10px">
              查看来源：
              <el-select v-model="dataForm.self" style="width:130px">
                <el-option label="查看所有新盘" value="1"></el-option>
                <el-option
                  :disabled="!$hasPermission('project:projectinfo:maintain')"
                  label="查看维护新盘"
                  value="0"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入楼盘名、楼盘编号检索"
              v-model="dataForm.search"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item>
              面积：
              <el-input v-model="dataForm.areas" placeholder="最小" class="Section_inp"></el-input>
              {{' -'}}
              <el-input v-model="dataForm.areae" placeholder="最大" class="Section_inp"></el-input>
            </el-form-item>
            <el-form-item>
              单价：
              <el-input v-model="dataForm.prices" placeholder="最低价" class="Section_inp"></el-input>
              {{' -'}}
              <el-input v-model="dataForm.pricee" placeholder="最高价" class="Section_inp"></el-input>
            </el-form-item>

            <el-form-item>
              总价：
              <el-input v-model="dataForm.pricess" placeholder="最低价" class="Section_inp"></el-input>
              {{' -'}}
              <el-input v-model="dataForm.pricese" placeholder="最高价" class="Section_inp"></el-input>
            </el-form-item>
            <el-form-item>
              审核类型：
              <ren-select
                v-model="dataForm.examine"
                dict-type="examine"
                placeholder="审核类型"
                clearable
              ></ren-select>
            </el-form-item>

            <el-button @click="Reset">重置</el-button>
            <el-form-item style="margin-left:20px;">
              <el-button
                type="primary"
                @click="addOrUpdateHandle()"
                v-if="$hasPermission('project:projectinfo:save')"
              >新增</el-button>
              <el-button
                v-if="$hasPermission('project:projectinfo:delete')&&dataForm.self=='0'"
                type="danger"
                @click="deleteHandle()"
              >{{ $t('deleteBatch') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        style="width: 100%;"
        @row-dblclick="details"
        @selection-change="dataListSelectionChangeHandle"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="编号" header-align="center" align="center">
          <!-- <template slot-scope="scope">{{"LP - "+scope.row.id}} </template> -->
          <template slot-scope="scope">{{"LP - "+scope.row.id.substring(scope.row.id.length-6)}}</template>
        </el-table-column>
        <el-table-column prop="imgUrl" label="首图" header-align="center" align="center" width="140">
          <template slot-scope="scope">
            <div v-if="scope.row.imgUrl" class="table_img">
              <img :src="scope.row.imgUrl" alt srcset />
            </div>
            <div v-else class="imgNull">图片拍摄中</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="楼盘名称" header-align="center" align="center">
          <template slot-scope="scope">
            <span class="font_weight">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="楼盘类型" header-align="center" align="center">
          <template slot-scope="scope">
            <span
              :style="dictTypeColor(scope.row.type)"
            >{{ $getDictLabel("dictType", scope.row.type) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="districtCode"
          label="商圈区域"
          header-align="center"
          align="center"
          width="130"
        >
          <template
            slot-scope="scope"
          >{{ $Dictionaries("CityRegion", scope.row.districtCode) }} {{ $Dictionaries("BusinessPage", scope.row.business) }}</template>
        </el-table-column>
        <el-table-column prop="state" label="销售状态" header-align="center" align="center">
          <template slot-scope="scope">{{ $getDictLabel("projState", scope.row.state) }}</template>
        </el-table-column>
        <el-table-column
          prop="areas"
          label="面积区间（㎡）"
          header-align="center"
          align="center"
          width="130"
        >
          <template slot-scope="scope">{{scope.row.areas}} - {{scope.row.areae}}</template>
        </el-table-column>

        <el-table-column prop="price" label="单价总价" header-align="center" align="center" width="200">
          <template slot-scope="scope">单价：{{scope.row.price}} 总价：{{scope.row.prices}}</template>
        </el-table-column>

        <el-table-column prop="maintainName" label="维护人" header-align="center" align="center"></el-table-column>
        <el-table-column prop="deptName" label="部门" header-align="center" align="center"></el-table-column>
        <el-table-column prop="sellTime" label="开盘时间" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.sellTime!=null?scope.row.sellTime.substring(0,10):scope.row.sellTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliverTime" label="交房时间" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.deliverTime!=null?scope.row.deliverTime.substring(0,10):scope.row.deliverTime}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="examine"
          label="审核"
          header-align="center"
          align="center"
          v-if="dataForm.self=='0'"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.examine"
              @change="tabExamineChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column
          prop="extranet"
          label="外网同步"
          header-align="center"
          align="center"
          v-if="dataForm.self=='0'"
        >
          <template slot-scope="scope">
            <el-switch
              class="switchStyle"
              v-model="scope.row.extranet"
              :active-value="1"
              :inactive-value="0"
              @change="tabExtranetChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <!-- <el-table-column
                    :label="$t('handle')"
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="150"
                    >
                    <template slot-scope="scope">
                        <el-button
                        type="text"
                        size="small"
                        v-if="$hasPermission('project:projectinfo:delete')"
                        @click="deleteHandle(scope.row.id)"
                        >删除</el-button>
                    </template>
        </el-table-column>-->
      </el-table>
      <div class="ZWbox"></div>
      <div class="paginationBox">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle"
        ></el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./Newdisk-add-orupdate";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/project/projectinfo/page",
        getDataListIsPage: true,
        // exportURL: "/project/projectinfo/export",
        deleteURL: "/project/projectinfo",
        deleteIsBatch: true
      },
      dataForm: {
        search: "",
        type: "",
        examine: "",
        districtCode: "",
        business: "",
        pricess: "",
        pricese: "",
        prices: "",
        pricee: "",
        areas: "",
        areae: "",
        self: "1",
        metroId: "",
        stationId: ""
      },
      // CityRegion: this.$store.state.CityRegion,
      // BusinessPage: this.$store.state.BusinessPage,
      businessList: this.$store.state.BusinessPage,
      metrostationList: [], //地铁站点列表
      select_type: "1"
    };
  },
  components: {
    AddOrUpdate
  },
  created() {},
  mounted() {},
  methods: {
    Reset() {
      this.dataForm = {
        search: "",
        type: "",
        examine: "",
        districtCode: "",
        business: "",
        pricess: "",
        pricese: "",
        prices: "",
        pricee: "",
        areas: "",
        areae: "",
        self: "1",
        metroId: "",
        stationId: ""
      };
    },
    details(row) {
      let _this = this;
      sessionStorage.setItem("MaintainType", "true");
      this.$router.push({
        name: "NewdiskView",
        query: { ID: row.id }
      });
    },

    //审核
    tabExamineChange(row) {
      this.$http
        .put(
          `/project/projectinfo/updateExamine`,
          {},
          {
            params: {
              id: row.id,
              examine: row.examine
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("更改成功");
        })
        .catch(() => {});
    },

    //外网同步
    tabExtranetChange(row) {
      this.$http
        .put(
          `/project/projectinfo/updateExtranet`,
          {},
          {
            params: {
              id: row.id,
              examine: row.extranet
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("更改成功");
        })
        .catch(() => {});
    },
    //行政区选择change
    CityRegionChange(val) {
      this.businessList = [];
      this.dataForm.business = "";
      this.$http
        .get(`/dictionary/business/businessList`, {
          params: {
            districtCode: val
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.businessList = res.data;
        })
        .catch(() => {});
    },
    //地铁线路选择change
    MetroPageChange(item) {
      if (item.metroStation.length > 0) {
        this.metrostationList = item.metroStation;
      } else {
        this.metrostationList = [];
        this.dataForm.stationId = "";
      }
    }
  },
  watch: {
    dataForm: {
      handler(nowVal, oldVal) {
        let _this = this;
        _this.getDataList();
      },
      deep: true
    }
  }
};
</script>
<style scoped lang="scss">
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 6px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -14px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 50px !important;
}
</style>